<template>
  <div class="persson">
<!--    <div>{{ sum }}</div>-->
<!--    <button type="button" @click="sum++">加一</button>-->
    <div>{{ person.Person.name }}</div>
    <div>{{ person.Person.age }}</div>
    <button type="button" @click="addName">加一</button>
    <button type="button" @click="person.Person.age++">加一</button>
    <button type="button" @click="change">change</button>
  </div>

</template>

<script lang="ts">
  export default {
    name: "MyTest2",
  }
</script>
<script setup lang="ts">
import {reactive, ref, watch} from 'vue'

  const sum = ref<number>(18);
  const person = reactive({
    name: 'RRinpu',
    Person: { // reactive包裹
      name: 'Rinpu',
      age: 18
    }
  });
  const stopWatch = watch(sum, (value : number, oldValue : number) => {
    console.log(1, value, 2, oldValue);
    if (sum.value >= 20) {
      stopWatch();
    }
  })
  watch([() => person.Person, () => person.name], (value : object, oldValue : object) => {
    console.log(1, value, 2, oldValue);
  },{deep : true});
  function addName() {
    person.Person.name += '~';
  }
  function change() {
    person.Person = {name : 'RRRinpu', age: 28};
  }
</script>

<style scoped>
  .persson {
    background-color: skyblue;
    padding: 16px;
  }
</style>